import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import { Button, message, Space, Table, Tabs } from "antd";
import FormItems from "@/components/FormItem";
import { useEffect, useRef, useState } from "react";
import moment from "moment";
import { useNavigate } from "react-router-dom";

const { TabPane } = Tabs;

type ArrItems = {
	name: string;
	label: string;
	type: string;
	placeholder?: string;
	rules?: any[];
	options?: any[] | any;
};

export const data: any[] = [
	{
		code: "1",
		name: "John Brown",
		tel: "17511438950",
		city: "江苏省 南京市 江宁区",
		persons: [
			{ name: "张三", tel: "17511438950", type: "父亲" },
			{ name: "张四", tel: "17511438950", type: "叔叔" }
		],
		time: "2025-03-04",
		type: "服务用户"
	},
	{
		code: "2",
		name: "sss",
		tel: "17511438950",
		city: "江苏省 南京市 秦淮区",
		persons: [{ name: "李四", tel: "17511438950", type: "母亲" }],
		time: "2025-03-04",
		type: "新用户"
	}
];

const Embedded = () => {
	const navigate = useNavigate();
	console.log(navigate);
	const [formVal, setFormVal] = useState<any>({});
	const [opti, setOpti] = useState<any[]>([]);
	console.log(opti);
	const columns: any[] = [
		{
			title: "人员编码",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "人员名称",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "性别",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "生日",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "年龄",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "联系方式",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "位置信息",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "最近陪诊时间",
			dataIndex: "code",
			key: "code",
			align: "center"
		},
		{
			title: "复诊时间",
			dataIndex: "name",
			key: "name",
			align: "center"
		},
		{
			title: "倒计时",
			dataIndex: "tel",
			key: "sex",
			align: "center"
		},
		{
			title: "陪诊状态",
			dataIndex: "birthday",
			key: "birthday",
			align: "center"
		},
		{
			title: "操作",
			dataIndex: "",
			key: "x",
			align: "center",
			render: () => (
				<p style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
					<a>操作</a>
				</p>
			)
		}
	];
	const formRef: any = useRef(null);
	// const items: ArrItems[] = [
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "name",
	// 		label: "同步下拉框",
	// 		type: "2",
	// 		options: [
	// 			{ label: "选项1", value: "1" },
	// 			{ label: "选项2", value: "2" }
	// 		]
	// 	},
	// 	{
	// 		name: "names",
	// 		label: "异步数据下拉框",
	// 		type: "2",
	// 		options: opti
	// 	},
	// 	{
	// 		name: "time",
	// 		label: "日期选择",
	// 		type: "3"
	// 	},
	// 	{
	// 		name: "times",
	// 		label: "日期范围选择",
	// 		type: "4"
	// 	},
	// 	{
	// 		name: "timeRange",
	// 		label: "时间范围选择",
	// 		type: "5"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	}
	// ];

	// 模拟异步
	const items: ArrItems[] = [
		{
			name: "code",
			label: "人员编码",
			type: "1"
		},
		{
			name: "code",
			label: "人员名称",
			type: "1"
		},
		{
			name: "code3",
			label: "人员性别",
			type: "2",
			options: [
				{ label: "男", value: "0" },
				{ label: "女", value: "1" }
			]
		},
		{
			name: "code2",
			label: "人员生日",
			type: "3"
		},
		{
			name: "code",
			label: "相关科室",
			type: "1"
		},
		{
			name: "code",
			label: "联系方式",
			type: "1"
		},
		{
			name: "code3",
			label: "文章状态",
			type: "2",
			options: [
				{ label: "男", value: "0" },
				{ label: "女", value: "1" }
			]
		}
	];
	const a = () => {
		return new Promise(response => {
			setTimeout(() => {
				response([
					{ label: "选项3", value: "3" },
					{ label: "选项4", value: "4" }
				]);
			}, 3000);
		});
	};

	// 提前请求 获取下拉框数据
	const init = async () => {
		const arr: any[] = (await a()) as any;
		setOpti(arr);
	};

	useEffect(() => {
		init();
	}, []);

	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	// const moreOnClick = () => {
	// 	message.success("点击更多");
	// };

	const tableSearch = () => {
		message.success(JSON.stringify(formVal));
	};

	// 对某些 搜索条件进行处理
	const changeSearch = (val: any) => {
		if (val.time) val.time = moment(val.time).format("YYYY-MM-DD");
		if (val.times) {
			val.startTime = moment(val.times[0]).format("YYYY-MM-DD");
			val.endTime = moment(val.times[1]).format("YYYY-MM-DD");
			delete val.times;
		}
		if (val.timeRange) {
			val.startTimes = moment(val.timeRange[0]).format("YYYY-MM-DD hh:mm:ss");
			val.endTimes = moment(val.timeRange[1]).format("YYYY-MM-DD hh:mm:ss");
			delete val.timeRange;
		}
		setFormVal(val);
	};

	return (
		<div>
			<LayoutWhite>
				<Title
					word={
						<Tabs>
							<TabPane tab={`复诊提醒`} key="0"></TabPane>
							<TabPane tab={`生日提醒`} key="1"></TabPane>
						</Tabs>
					}
					more={moreButton()}
				/>
				<FormItems itemProps={items} callback={val => changeSearch(val)} ref={formRef} />
				<div style={{ display: "flex", flexDirection: "column" }}>
					<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
						<Space>
							<Button
								onClick={() => {
									setFormVal({});
									formRef.current.reset();
								}}
							>
								重置
							</Button>
							<Button type="primary" onClick={() => tableSearch()}>
								搜索
							</Button>
						</Space>
					</div>
					<Table bordered={true} columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
				</div>
			</LayoutWhite>
		</div>
	);
};
export default Embedded;
